<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div class="profile-header">
        <div class="avatar-gradient">
          <el-avatar :size="100" :src="userAvatar" />
        </div>
        <div class="profile-info">
          <div class="profile-name">{{ user?.name || '未登录' }}</div>
          <div class="profile-role">
            <el-tag :type="roleTagType" size="large" effect="dark">{{ userRole }}</el-tag>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="profile-detail">
        <div><el-icon style="vertical-align:middle;"><User /></el-icon> <strong>用户名：</strong>{{ user?.username || '-' }}</div>
        <div><el-icon style="vertical-align:middle;"><UserFilled /></el-icon> <strong>身份：</strong>{{ userRole }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { User, UserFilled } from '@element-plus/icons-vue'

const authStore = useAuthStore()
const user = computed(() => authStore.user)
const userRole = computed(() => authStore.userRole)
const userAvatar = computed(() => localStorage.getItem('userAvatar') || user.value?.avatarUrl || '/favicon.ico')
const roleTagType = computed(() => {
  if (userRole.value === '管理员') return 'danger'
  if (userRole.value === '员工') return 'warning'
  return 'info'
})
</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: 100vh;
  background: linear-gradient(135deg, #f7f3ed 60%, #e0cfc2 100%);
}
.profile-card {
  width: 420px;
  padding: 36px 28px 32px 28px;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(140,110,99,0.10), 0 1.5px 6px 0 rgba(205,180,155,0.08);
  background: #fff;
  border: none;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 18px;
}
.avatar-gradient {
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0cfc2 0%, #f7d9b9 100%);
  box-shadow: 0 2px 12px rgba(205,180,155,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-info {
  flex: 1;
}
.profile-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #8d6e63, #cbb49a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.profile-role {
  margin-bottom: 4px;
}
.profile-detail {
  font-size: 16px;
  color: #555;
  line-height: 2.2;
  margin-top: 10px;
}
</style> 